<template>
    <!--
        @program: video-manage
        @description:
        @author: Yu.Xiong
        @create: 2020-09-17 19:45
      -->
    <div>
        <div class="home-title">
            <div style="margin-right: 20px;">
                最后登录时间：2020-01-01 12:00:00
            </div>
            <div>
                最后登录IP：222.434.311
            </div>
        </div>
        <el-divider content-position="right">统计数</el-divider>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="home-statistics-title">点赞数据</div>
                <div class="home-statistics">
                    <div>
                        <div>今日点赞总数</div>
                        <div>{{homeData.likeCnt || 0}}</div>
                    </div>
                    <div>
                        <i class="el-icon-s-cooperation"></i>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="home-statistics-title">评论数据</div>
                <div class="home-statistics">
                    <div>
                        <div>今日评论数</div>
                        <div>{{homeData.commentCnt || 0}}</div>
                    </div>
                    <div>
                        <i class="el-icon-s-cooperation"></i>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="home-statistics-title">关注数据</div>
                <div class="home-statistics">
                    <div>
                        <div>今日关注数据</div>
                        <div>{{homeData.attentionCnt || 0}}</div>
                    </div>
                    <div>
                        <i class="el-icon-s-cooperation"></i>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 50px;">
            <el-col :span="8">
                <div class="home-statistics-title">筛选（采集）数据</div>
                <div class="home-statistics">
                    <div>
                        <div>筛选（采集）数据</div>
                        <div>{{homeData.crawlerCnt || 0}}</div>
                    </div>
                    <div>
                        <i class="el-icon-s-cooperation"></i>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="home-statistics-title">私信数据</div>
                <div class="home-statistics">
                    <div>
                        <div>私信数据</div>
                        <div>15428</div>
                    </div>
                    <div>
                        <i class="el-icon-s-cooperation"></i>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

  import { get } from '@/api/home'

  export default {
    name: "index",
    data () {
      return {
        homeData: {
          "attentionCnt": 0,//关注数量
          "commentCnt": 0,//评论数量
          "crawlerCnt": 0,//采集的数据量
          "likeCnt": 0,//点赞数量
          //私信数据 todo
        }
      }
    },
    methods: {
      async get () {
        try {
          const {data} = await get()
          this.homeData = data
          console.log(data)
        } catch (e) {
          console.log(e)
        }
      }
    },
    mounted () {
      this.get()
    }
  }
</script>

<style scoped lang="scss">

    .home {
        &-title {
            display: flex;
        }

        &-statistics {

            &-title {
                margin: 5px 0;
            }

            height: 100px;
            background: rgb(42, 209, 153);
            border-radius: 5px;
            color: white;
            display: flex;
            justify-content: space-between;

            > div {
                margin: 20px;

                div {
                    margin: 10px;
                }
            }

            i {
                font-size: 40px;
                opacity: .4;
                margin: 10px 10px 0 0;
            }
        }

    }

</style>
